// 导航栏

<template>
  <div class="BackBox">
    <div class="navBox">
      <div class="nav_content">
        <router-link to="/mainPage" class="logo">
          <img src="../assets/logo.png" alt="" />
        </router-link>
        <ul>
          <li
            :class="{ choose: index == currentIndex }"
            class="hot_box"
            v-for="(item, index) in list"
            :key="index"
            @click="toScroll(index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="search_box">
          <input
            type="text"
            placeholder="开启您的音乐之旅。"
            v-model="search_value"
            @keyup.enter="toSearchPage()"
          />
          <div id="searchBtn" class="search_btn" @click="toSearchPage()">
            <div class="img_box">
              <img src="../assets/angle-right.png" alt="" />
            </div>
          </div>
        </div>
        <div @click="toLogin" class="logoin_box same_class_box">
          <div class="logoin_btn circle_btn">
            {{ logoin_content }}
          </div>
          <div class="logoin_info info_same_class">
            {{ usr_id }}
          </div>
        </div>
        <div @click="toInfo" class="person_box same_class_box">
          <div class="person_btn circle_btn">
            <span class="user_box">
              <img class="user_icon" src="../assets/user-o.png" alt="" />
            </span>
          </div>
          <div class="person_info info_same_class">
            {{ person_info_text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "navVue",
  data() {
    return {
      search_value: "",
      list: [{ name: "hot歌单" }, { name: "新专上架" }, { name: "hot榜单" }],
      logoin_content: "登录",
      usr_id: "游客",
      person_info_text: "个人中心",
      search_result: [],
      currentIndex: -1,
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("token"))) {
      this.usr_id = JSON.parse(sessionStorage.getItem("user"));
      this.logoin_content = "退出";
    }
  },

  methods: {
    //跳转到搜索界面
    toSearchPage() {
      this.clickCount++;
      if (this.search_value === "") {
        alert("请输入搜索关键词");
      } else {
        this.$router.push({
          path: "/search_page",
          query: {
            keyword: this.search_value,
          },
        });
        this.$root.isToken++;
      }
    },
    //滚动到对应的栏目
    toScroll(index) {
      this.currentIndex = index;
      this.$router.push("/mainPage");
      switch (index) {
        case 0:
          window.scrollTo({
            top: 640,
            behavior: "smooth",
          });
          break;
        case 1:
          window.scrollTo({
            top: 1050,
            behavior: "smooth",
          });
          break;
        case 2:
          window.scrollTo({
            top: 1200,
            behavior: "smooth",
          });
          break;
      }
    },
    //到个人页
    toInfo() {
      if (JSON.parse(sessionStorage.getItem("token"))) {
        this.$router.push({
          path: "/info",
          query: {
            infoFlag: 0,
          },
        });
        this.$root.isToken++;
      } else {
        alert("请先登录");
      }
    },
    //登录.退出
    toLogin() {
      if (JSON.parse(sessionStorage.getItem("token"))) {
        sessionStorage.removeItem("token");
        alert("您已成功退出");
        this.$root.isToken--;
      }
      this.$router.push("/loginPwd");
    },
  },
};
</script>

<style scoped>
/* 动态css */
.choose {
  background: #659274;
  color: #21262c;
}
.BackBox {
  margin: 0 auto;
  height: 95px;
  background-color: #21262c;
  border-bottom: #659274 10px solid;
}
.navBox {
  width: 1314px;
  margin: 0 auto;
  height: 95px;
  background-color: #21262c;
  border-bottom: #659274 10px solid;
}
.nav_content {
  width: 1314px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 95px;
  width: 178px;
}
.text_box1 {
  width: 38px;
  height: 66px;
  font-size: 47px;
  font-family: Fira Sans;
  font-weight: normal;
  color: #659274;
  line-height: 66px;
}
.text_box2 {
  width: 130px;
  height: 66px;
  font-size: 36px;
  font-family: Sigmar One;
  font-weight: 400;
  color: #ffffff;
  line-height: 66px;
}
ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 309px;
  height: 95px;
}
ul li {
  height: 100px;
  width: 116px;
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  transition: all 0.3s;
  line-height: 100px;
  text-align: center;
}
ul li:hover {
  cursor: pointer;
}
.search_box {
  display: flex;
  align-items: center;
  width: 372px;
  height: 50px;
  position: relative;
}
input {
  width: 372px;
  padding-left: 16px;
  height: 50px;
  background: #ffffff;
  box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.55);
  border-radius: 25px;
}
::-webkit-input-placeholder {
  color: #666666;
}
.search_btn {
  display: flex;
  justify-content: center;
  position: absolute;
  right: 11px;
  top: 9px;
  width: 71px;
  height: 32px;
  background: #659274;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.52);
  border-radius: 16px;
  text-align: center;
}
.search_btn:hover {
  cursor: pointer;
}
.search_btn .img_box {
  width: 37px;
  height: 30px;
  overflow: hidden;
}
.search_btn .img_box img {
  width: 37px;
  height: 30px;
  transform: translateY(-30px);
  filter: drop-shadow(#fff 0 30px);
}
.same_class_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 115px;
  height: 46px;
}
.same_class_box:hover {
  cursor: pointer;
}
.circle_btn {
  width: 45px;
  height: 46px;
  background: #659274;
  border-radius: 22px;
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: #ffffff;
  line-height: 46px;
  text-align: center;
}

.info_same_class {
  font-size: 14px;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.51);
}
.info_same_class:hover {
  cursor: pointer;
}
.user_box {
  margin-top: 2px;
  display: inline-block;
  width: 35px;
  height: 40px;
  overflow: hidden;
}
.user_icon {
  width: 35px;
  height: 40px;
  transform: translateY(40px);
  filter: drop-shadow(#ffffff 0 -40px);
}
.logoin_box {
  width: 200px;
  display: flex;
  justify-content: space-around;
}
</style>